<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="theUser"
    >
      <van-card v-for="item in theUserList" :key="item.id">
        <template #thumb>
          <img :src="item.backgroundUrl" class="imeag" />
        </template>
        <template #tags>
          <div class="van-card__titlee">
            <span slot="title" v-html="highlight(item.nickname)"></span>
            &nbsp;

            <i class=" iconfont icon-nan" v-if="item.gender === 1"></i>

            <i class="iconfont icon-nv" v-else></i>
          </div>
          <div
            slot="title"
            class="van-card__descc"
            v-html="highlight(item.signature)"
          ></div>
          <van-button
            class="btnFloat"
            icon="plus"
            type="default"
            round
            size="small"
            color="#e44449"
            plain
            >关注</van-button
          >
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
import { theUser } from '@/api/SongSearch'
export default {
  props: {
    keywords: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      theUserList: [],
      type: 1002,
      limit: 10,
      offset: 1,
      loading: false,
      finished: false
    }
  },
  created () {},
  mounted () {},
  methods: {
    async theUser () {
      try {
        const {
          result: { userprofiles }
        } = await theUser({
          keywords: this.keywords,
          type: this.type,
          limit: this.limit,
          offset: (this.offset - 1) * this.limit
        })
        this.theUserList.push(...userprofiles)
        // this.theUserList = userprofiles
        // const obj = {}
        // this.theUserList = this.theUserList.reduce((cur, next) => {
        //   if (!obj[next.id]) {
        //     obj[next.id] = true && cur.push(next)
        //   }
        //   return cur
        // }, [])
        this.loading = false
        if (userprofiles) {
          this.offset++
        } else {
          this.finished = true
        }
      } catch (error) {}
    },
    // 高亮
    highlight (text) {
      const regExp = new RegExp(this.keywords, 'gi')
      const highlightStr = `<span class="active">${this.keywords}</span>`
      return text.replace(regExp, highlightStr)
    }
  }
}
</script>

<style scoped lang="less">
.van-card {
  background: #fff;
  margin-top: 0;
}
/deep/.van-card__titlee {
  margin-top: 15px !important;
  font-size: 30px !important;
}
.van-card__descc {
  margin-top: 15px;
  color: #909090;
  width: 400px;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.van-card__thumb {
  width: 150px;
  height: 150px;
}
/deep/.van-card__thumb img {
  border-radius: 50%;
  background: #fff !important;
  width: 100%;
  height: 100%;
}
.van-card__content {
  border-bottom: 1px solid #f3f3f3;
  height: 120px !important;
}

.van-card {
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.btnFloat {
  position: absolute;
  top: 55px;
  right: 30px;
  height: 55px;
}
.iconfont {
  font-size: 30px;
}
.icon-nan {
  color: #06a7f7;
}
.icon-nv {
  color: #ff4081;
}
</style>
